<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>作品详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../css/main.css" /> -->
    <!-- <link rel="stylesheet" type="text/css" href="../css/myProduct.css" /> -->
</head>
<style>
*{
  margin: 0;
  padding: 0px;
}
#header{
  background-color: #1296db;
  text-align: center;
  /*margin-top: 15px;*/
  padding-top: 25px;
  padding-bottom: 10px;
  /*height: 45px;*/

}
h3 {
    color: white;
    font-weight: lighter;
}

.back{
  position: absolute;
  top:30px;
  left:15px;
  width: 25px;
  height: 25px;
  background: url("../../image/back.png");
  background-size: 100% 100%;
}
.main{
  border: 1px dashed red;
  margin-top: -50px;
}

.detail{
  border-bottom: 1px solid black;
}
</style>
<body>
  <div id="header">
    <a class="back" onclick="back()"></a>
    <h3>作品详情</h3>
  </div>
  <div class="broadcast">

  </div>
    <div class="main detail-main">
      <div class="detail">
        <h3>作品简介</h3>
        <p>有些游戏适合一个人默默享受，而有的游戏和朋友联机才能体验到快乐。今天就推荐几款，让你和好友一起嗨过瘾</p><br>

      </div>
      <div class="team">

        <h3>团队简介</h3>
        <p> 1、产品（1个）<br>
            2、技术大牛（1个，必须有）<br>
            3、后端（php、java啥的，2个）<br>
            4、前端（1个web前端，1个webapp）<br>
            5、安卓（1个）<br>
            6、iOS（1个）<br>
            7、ui（1个）</p>
      </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/main.js"></script>
<script type="text/javascript" src="../../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
apiready=function(){
  //打开一个头部的frame
  // api.openFrame({
  //     name: 'product_frame',
  //     url: 'product_frame.html',
  //     scrollEnabled:false,
  //     rect: {
  //         x: 0,
  //         y: 0,
  //         w: 'auto',
  //         h: '0'
  //     }
  // });
  function back(){
    api.historyBack({
        frameName: 'detail'
        }, function(ret, err) {
        if (!ret.status) {
           api.closeWin();
        }
        });
  }
  var broadcast =$(".broadcast")[0];
  $(".broadcast").css("height",api.winHeight / 4);

  var UIScrollPicture = api.require('UIScrollPicture');
  UIScrollPicture.open({
      rect: {
        x: 0,
       y:60,
       w: api.winWidth,
       h: api.winHeight / 4
      },
      data: {
          paths: [
              'widget://image/1.jpg',
              'widget://image/2.jpg',
              'widget://image/3.jpg',
              'widget://image/5.jpg'
          ]
      },
      styles: {
          indicator: {
              align: 'center',
              color: '#FFFFFF',
              activeColor: '#bbb'
          }
      },
      placeholderImg: 'widget://res/slide1.jpg',
      contentMode: 'scaleToFill',
      interval: 3,
      fixedOn: api.frameName,
      fixed:false,
      loop: true
  }, function(ret, err) {

  });
}
back();
//jquery
// $(function(){
//   back();
// })
</script>
</html>
